<template>
  <x-dialog
    title="确认提示"
    :close-on-click-modal="false"
    :show.sync="visible"
    v-if="visible"
    lock-scroll
    append-to-body
    width="450px"
    :before-close="handleClose"
    @onCancel="handleClose"
    @onSubmit="handleSubmit"
  >
    <el-form :model="revocationForm" :rules="rules" ref="form" label-position="top">
      <el-form-item label="悔标原因" prop="type">
        <x-radio-group :list-data="revocationRadioList" v-model="revocationForm.type"></x-radio-group>
      </el-form-item>
      <el-form-item label="悔标说明" prop="regretRemark">
        <el-input v-model="revocationForm.regretRemark" placeholder="请输入悔标说明"></el-input>
      </el-form-item>
    </el-form>
  </x-dialog>
</template>

<script>
  export default {
    name: 'RevocationForm',
    data() {
      return {
        visible: false,
        revocationForm: {
          type: '1',
          regretRemark: ''
        },
        revocationRadioList: [
          {
            label: '悔标, 重新定价',
            value: '1'
          },
          {
            label: '悔标, 放弃定价',
            value: '2'
          }
        ],
        rules: {
          type: [{ required: true, message: '请选择悔标原因', trigger: 'blur' }],
          regretRemark: [{ required: true, message: '请输入悔标说明', trigger: 'blur' }]
        }
      }
    },
    methods: {
      show() {
        this.visible = true
      },
      resetForm() {
        this.revocationForm.type = '1'
        this.revocationForm.regretRemark = ''
      },
      handleClose() {
        this.visible = false
        this.resetForm()
      },
      // 弹窗确定
      handleSubmit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$emit('on-submit', this.revocationForm)
            this.resetForm()
          }
        })
      }
    }
  }
</script>

<style scoped></style>
